<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>精益管控</title>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/Multiselect.css"/>
    <link rel="stylesheet" href="css/prettify.css"/>
    <link rel="stylesheet" href="css/jygk-video.css"/>
</head>
<body>
<div class="container">
    <p class="name">精益管控</p>
    <!-- list-->
    <div class="list">
        <ul class="select">
            <li>
                <!-- 省公司-->
                <select id="province" multiple="multiple">
                        <option value="北京">北京</option>
                        <option value="河北">河北</option>
                        <option value="冀北">冀北</option>
                        <option value="山西">山西</option>
                        <!--<option value=""></option>-->
                        <!--<option value=""></option>-->
                </select>
            </li>
            <li>
                <!-- 地市公司-->
                <select id="area" multiple="multiple">
                    <option value="北京">北京</option>
                    <option value="河北">河北</option>
                    <option value="冀北">冀北</option>
                    <option value="山西">山西</option>
                    <!--<option value=""></option>-->
                    <!--<option value=""></option>-->
                </select>
            </li>
            <li>
                <!-- 电压等级-->
                <select id="voltage" multiple="multiple">
                    <option value="北京">北京</option>
                    <option value="河北">河北</option>
                    <option value="冀北">冀北</option>
                    <option value="山西">山西</option>
                    <!--<option value=""></option>-->
                    <!--<option value=""></option>-->
                </select>
            </li>
            <li>
                <!-- 变电站-->
                <select id="substation" multiple="multiple">
                    <option value="北京">北京</option>
                    <option value="河北">河北</option>
                    <option value="冀北">冀北</option>
                    <option value="山西">山西</option>
                    <!--<option value=""></option>-->
                    <!--<option value=""></option>-->
                </select>
            </li>
            <li>
                <!-- 监测点-->
                <select id="instation" multiple="multiple">
                    <option value="北京">北京</option>
                    <option value="河北">河北</option>
                    <option value="冀北">冀北</option>
                    <option value="山西">山西</option>
                    <!--<option value=""></option>-->
                    <!--<option value=""></option>-->
                </select>
            </li>
        </ul>
        <!-- table-->
        <div class="table">
            <!-- 监测点=视频名字-->
            <table>
                <tbody>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- -->
    <div class="video">
        <ul class="video-list">
            <li>
                <video preload   src="2.mp4"></video>
                <img class="video-border" src="img/video-border2.png" alt=""/>
                <p class="video-name">张华变电站视频</p>
                <img src="img/play.png" alt="" class="play"/>
            </li>
            <li>
                <video preload   src="2.mp4"></video>
                <img class="video-border"  src="img/video-border2.png" alt=""/>
                <p class="video-name">张华变电站视频</p>
                <img src="img/play.png" alt="" class="play"/>

            </li>
            <li>
                <video preload   src="2.mp4"></video>
                <img class="video-border"  src="img/video-border2.png" alt=""/>
                <p class="video-name">张华变电站视频</p>
                <img src="img/play.png" alt="" class="play"/>

            </li>
            <li>
                <video preload   src="2.mp4"></video>
                <img class="video-border"  src="img/video-border2.png" alt=""/>
                <p class="video-name">张华变电站视频</p>
                <img src="img/play.png" alt="" class="play"/>

            </li>
            <li>
                <video preload   src="2.mp4"></video>
                <img src="img/video-border2.png" alt=""/>
                <p class="video-name">张华变电站视频</p>
                <img src="img/play.png" alt="" class="play"/>

            </li>
            <li>
                <video preload   src="2.mp4"></video>
                <img class="video-border"  src="img/video-border2.png" alt=""/>
                <p class="video-name">张华变电站视频</p>
                <img src="img/play.png" alt="" class="play"/>

            </li>
        </ul>
        <ul class="pages">
            <li class="hover">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>...</li>
            <li><<</li>
            <li>>></li>
            <li>下一页</li>
        </ul>
    </div>
    <div class="tab">
        <p class="active">变电</p>
        <p>输电</p>
        <p>配网</p>
    </div>
</div>
<script src="../js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/Multiselect.js"></script>
<script src="js/prettify.js"></script>
<script src="js/jygk-video.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#province').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            includeSelectAllOption: true,
            buttonWidth: '308px',
            dropRight: true,
            maxHeight: 357,
            onChange: function(option, checked) {
                alert($(option).val());
                alert(checked);
                /*if(条件) {
                 this.clearSelection();//清除所有选择及显示
                 }*/
            },
            nonSelectedText: '省公司',
            numberDisplayed: 10,
            enableFiltering: true,
            allSelectedText:'全部',
        });
        $('#area').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            includeSelectAllOption: true,
            buttonWidth: '308px',
            dropRight: true,
            maxHeight: 357,
            onChange: function(option, checked) {
                alert($(option).val());
                /*if(条件) {
                 this.clearSelection();//清除所有选择及显示
                 }*/
            },
            nonSelectedText: '地市公司',
            numberDisplayed: 60,
            enableFiltering: true,
            allSelectedText:'全部',
        });
        $('#voltage').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            includeSelectAllOption: true,
            buttonWidth: '308px',
            dropRight: true,
            maxHeight: 357,
            onChange: function(option, checked) {
                alert($(option).val());
                /*if(条件) {
                 this.clearSelection();//清除所有选择及显示
                 }*/
            },
            nonSelectedText: '电压等级',
            numberDisplayed: 60,
            enableFiltering: true,
            allSelectedText:'全部',
        });
        $('#substation').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            includeSelectAllOption: true,
            buttonWidth: '308px',
            dropRight: true,
            maxHeight: 357,
            onChange: function(option, checked) {
                alert($(option).val());
                /*if(条件) {
                 this.clearSelection();//清除所有选择及显示
                 }*/
            },
            nonSelectedText: '变电站',
            numberDisplayed: 60,
            enableFiltering: true,
            allSelectedText:'全部',
        });
        $('#instation').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            includeSelectAllOption: true,
            buttonWidth: '308px',
            dropRight: true,
            maxHeight: 357,
            onChange: function(option, checked) {
                alert($(option).val());
                /*if(条件) {
                 this.clearSelection();//清除所有选择及显示
                 }*/
            },
            nonSelectedText: '监测点',
            numberDisplayed: 60,
            enableFiltering: true,
            allSelectedText:'全部',
        });
    });
</script>
</body>
</html>